<template>
	<view>
		<view class="top-view">
			<view class="guars">
				<u-icon v-for="(item,index) in guarantee" name="checkmark-circle" size="30" :label="item"
					label-color="#fff" :label-size="24" color="#fff"></u-icon>
			</view>
			<view class="top-round">
				<view class="search-view">
					<view style="width:20%;border-right: 2rpx solid #d4d4d4;" class="flex-center">
						<u-icon name="arrow-down-fill" size="18" label="广州市" color="#bfbfbf" label-color="#000"
							:label-size="28" label-pos="left"></u-icon>
					</view>
					<view style="width:60%;">
						<u-notice-bar mode="vertical" :list="noticeList" bg-color="#fff" color="#bfbfbf"
							leftIcon="search"></u-notice-bar>
					</view>
					<view style="width:20%;" class="flex-center">
						<u-tag type="primary" text="搜索" mode="dark" shape="circle" bg-color="#2979ff"></u-tag>
					</view>
				</view>
			</view>
		</view>

		<view class="w94 grid-view radius20">
			<u-grid :col="5" :border="false">
				<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" v-for="(item,index) in gridList1">
					<u-icon :name="item.icon" :size="70"></u-icon>
					<view class="grid-text">{{item.text}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="w94 grid-view2 radius20">
			<u-grid :col="4" :border="false">
				<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" v-for="(item,index) in gridList2">
					<u-icon :name="item.icon" :size="70"></u-icon>
					<view class="grid-text">{{item.text}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="w94 mt20">
			<u-swiper :list="bannerList" :height="150" :border-radius="15" mode="rect"></u-swiper>
		</view>

		<view class="w94 mt20 radius20 bgwhite">
			<view class="w94 pj-title" style="padding:20rpx 0rpx;">
				<view>家电维修</view>
				<view class="pj-tips">明码标价不花冤枉钱</view>
			</view>
			<view class="pj-list">
				<view class="pj-item" v-for="(item,index) in 4" @click="to('/pages/index/detail')">
					<view class="pj-item-view radius20"
						style="background: linear-gradient(to top, #f7ebff, #eee);width:90%;margin:0 auto;"
						:style="index % 2==0?'margin-right:10rpx':'margin-left:10rpx'">
						<view class="w94" style="text-align: center;padding-top: 30rpx;">
							<image src="http://n1.itc.cn/img8/wb/recom/2016/06/24/146674347901435567.PNG"
								style="width:200rpx;height: 200rpx;"></image>
						</view>
						<view class="w94" style="text-align: center;padding:20rpx 0rpx;font-size: 30rpx;">
							洗衣机维修
						</view>
						<view class="w94 flex-center" style="padding-bottom: 20rpx;">
							<view class="pj-btn">立即查看</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="w94 mt20 radius20 bgwhite">
			<view class="w96 flex-between" style="padding-top:20rpx">
				<label style="font-weight: bold;font-size: 32rpx;">一键报修</label>
				<label style="font-size: 24rpx;color:#999;">拒绝小病大修</label>
			</view>
			<view class="w96 flex-between" style="padding: 20rpx 0rpx;">
				<view v-for="(item,index) in 5" class="flex-center radius20"
					style="flex-direction: column;position: relative;">
					<view class="flex-center radius20" style="width:110rpx;height: 100rpx;background: #f8f8f8;;">
						<image
							src="https://img.599ku.com/element_min_new_pic/0/5/48/87/d856aa84bb8a1244da5d646c85781e21.png"
							style="width:80rpx;height: 80rpx;"></image>
					</view>
					<view
						style="font-size: 28rpx;color:#999;text-align: center;padding-bottom: 10rpx;margin-top: 10rpx;">
						电视机
					</view>
					<view class="tag-yellow">
						专业</view>
				</view>
			</view>
		</view>

		<view class="w94 mt20 radius20 bgwhite">
			<view class="w96 flex-between" style="padding-top:20rpx">
				<label style="font-weight: bold;font-size: 32rpx;">清洗单品</label>
				<label style="font-size: 24rpx;color:#999;">除湿除霉享洁净</label>
			</view>
			<view class="w96 flex-between" style="padding: 20rpx 0rpx;">
				<view v-for="(item,index) in 5" class="flex-center radius20"
					style="flex-direction: column;position: relative;">
					<view class="flex-center radius20" style="width:110rpx;height: 100rpx;background: #f8f8f8;;">
						<image
							src="https://img.599ku.com/element_min_new_pic/0/5/48/87/d856aa84bb8a1244da5d646c85781e21.png"
							style="width:80rpx;height: 80rpx;"></image>
					</view>
					<view
						style="font-size: 28rpx;color:#999;text-align: center;padding-bottom: 10rpx;margin-top: 10rpx;">
						电视机
					</view>
					<view class="tag-blue">
						专业</view>
				</view>
			</view>
		</view>



		<view class="w94 mt20 radius20 bgwhite">
			<view class="w96 flex-between" style="padding-top:20rpx">
				<label style="font-weight: bold;font-size: 32rpx;">维修社区</label>
				<u-icon name="arrow-right" label="查看全部" label-pos="left" color="#377fec" label-color="#377fec" size="24"
					label-size="24"></u-icon>
			</view>
			<view class="w96" style="padding: 20rpx 0rpx;">
				<view style="padding: 10rpx 0rpx;" v-for="(item,index) in 3"
					:style="index==0?'':'border-top:2rpx solid #f1f1f1'">
					<u-card :show-head="false" :border="false" :foot-border-top="false" :padding="0" :margin="0">
						<view class="" slot="body" style="border:0rpx;">
							<view class="u-body-item u-flex u-col-between u-p-t-0">
								<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
								<image
									src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="" slot="foot">
							<u-icon name="eye" size="30" color="#999" label-color="#999" label-size="24"
								label="1267人看过  7回答"></u-icon>
						</view>
					</u-card>
				</view>
			</view>
		</view>

		<view class="w96 mt20 radius20 flex-between" style="padding:10rpx 0rpx;">
			<view class="sm-item flex-center">
				<view class="sm-item-title sm_cur">家电清洗</view>
				<view class="sm-item-tips  sm_cur">保修30天</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">家电维修</view>
				<view class="sm-item-tips">保修90天</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">管道疏通</view>
				<view class="sm-item-tips">标准报价</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">水电维修</view>
				<view class="sm-item-tips">保修30天</view>
			</view>
		</view>


		<view class="w94 mt20 radius20">
			<view class="flex-start mt20 radius20 bgwhite" style="width:100%;padding:20rpx 10rpx;"
				v-for="(item,index) in 10">
				<view style="margin-right: 20rpx;">
					<image src="http://n1.itc.cn/img8/wb/recom/2016/06/24/146674347901435567.PNG"
						style="width:180rpx;height: 180rpx;" class="radius20"></image>
				</view>
				<view class="flex-between"
					style="flex-direction: column;height: 180rpx;align-items: flex-start;width: 70%;">
					<view style="font-weight: bold;font-size: 30rpx;">油烟机清洗</view>
					<view style="font-size: 24rpx;color:#999;">【强力去油污】告别油垢顽渍</view>
					<view class="flex-between" style="margin-right: 20rpx;width:100%;">
						<view style="color:red;">
							<label style="font-size: 24rpx;">￥</label>
							<label style="font-size: 34rpx;font-weight: bold;">198.00</label>
							<label style="font-size: 24rpx;font-family: 宋体;">/次</label>
						</view>
						<view>
							<u-tag type="primary" text="立即预约" mode="dark" shape="circle" bg-color="#2979ff"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="width:100%;height: 100rpx;">
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: ['https://cdn.uviewui.com/uview/swiper/1.jpg', 'https://cdn.uviewui.com/uview/swiper/2.jpg'],
				guarantee: ['服务至上', '价格亲民', '质量过硬', '时效保障'],
				noticeList: ['冰箱维修', '马桶疏通', '热水器维修'],
				gridList1: [{
						icon: '/static/grid/1.png',
						text: '家电维修',
						path: ''
					},
					{
						icon: '/static/grid/2.png',
						text: '家电清洗',
						path: ''
					},
					{
						icon: '/static/grid/3.png',
						text: '水电维修',
						path: ''
					},
					{
						icon: '/static/grid/4.png',
						text: '管道疏通',
						path: ''
					},
					{
						icon: '/static/grid/5.png',
						text: '家电安装',
						path: ''
					},
					{
						icon: '/static/grid/6.png',
						text: '家具维保',
						path: ''
					},
					{
						icon: '/static/grid/7.png',
						text: '门窗维保',
						path: ''
					},
					{
						icon: '/static/grid/8.png',
						text: '电脑维修',
						path: ''
					},
					{
						icon: '/static/grid/9.png',
						text: '防水补漏',
						path: ''
					},
					{
						icon: '/static/grid/10.png',
						text: '全部服务',
						path: ''
					}
				],
				gridList2: [{
						icon: '/static/grid/11.png',
						text: '新人领100元',
						path: ''
					},
					{
						icon: '/static/grid/12.png',
						text: '轻松赚积分',
						path: ''
					},
					{
						icon: '/static/grid/13.png',
						text: '会员省830元',
						path: ''
					},
					{
						icon: '/static/grid/14.png',
						text: '加专属客服',
						path: ''
					}
				],
				keyword: ''
			}
		},
		methods: {
			to(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
	.top-view {
		width: 100%;
		background: #4a94ff;
		/* #ifdef H5*/
		padding: 20rpx 0rpx;
		/*#endif*/
		/* #ifndef H5*/
		padding-bottom: 20rpx;
		/*#endif*/
		position: relative;
	}

	.guars {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.top-round {
		background: #f5f5f7;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 100%;
		/* #ifdef H5*/
		top: 70rpx;
		/*#endif*/
		/* #ifndef H5*/
		top: 46rpx;
		/*#endif*/
		position: absolute;
		bottom: -20rpx;
	}

	.search-view {
		width: 94%;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.grid-text {
		font-size: 24rpx;
		margin-top: 12rpx;
		color: #000;
	}

	.grid-view {
		background: #fff;
		margin-top: 85rpx;
		padding: 0rpx 24rpx
	}

	.grid-view2 {
		background: #fff;
		margin-top: 20rpx;
		padding: 0rpx 24rpx
	}

	.pj-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #000;
	}

	.pj-tips {
		font-size: 26rpx;
		font-weight: 100;
		margin-top: 14rpx;
		color: #999
	}

	.pj-list {
		/* margin-top: 20rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.pj-item {
		width: 50%;
		margin-bottom: 20rpx;
	}

	.pj-item-view {}

	.pj-btn {
		background: linear-gradient(to top, #cfac4b, #d2a830);
		border-radius: 30rpx;
		color: #fff;
		font-weight: bold;
		padding: 8rpx 30rpx;
	}

	.tag-yellow {
		position: absolute;
		left: 0rpx;
		top: 4rpx;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		border-top-left-radius: 0rpx;
		background: linear-gradient(to right, #ff9c00, #fdc103);
		color: #fff;
		font-size: 20rpx;
	}

	.tag-blue {
		position: absolute;
		left: 0rpx;
		top: 4rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		border-top-right-radius: 0rpx;
		border-bottom-left-radius: 0rpx;
		background: linear-gradient(to right, #5bbefa, #2ba9f5);
		color: #fff;
		font-size: 20rpx;
	}

	.sm-item {
		width: 25%;
		flex-direction: column;
	}

	.sm-item-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #000;
	}

	.sm-item-tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.sm_cur {
		color: #2d80fd
	}
</style>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
